<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      委托评估
    </view>
    <view class="center">
      <view class="center_item">
        <span class="center_item_span">我要评估</span>
        <picker @change="PickerChange" data-type="4" range-key="valueName" :range="type4">
          <view class="picker" v-if="typeIndex4 != -1">{{ type4[typeIndex4].valueName }}</view>
          <view class="picker" style="color: #666" v-else>请选择评估物品</view>
        </picker>
      </view>
      <view class="center_item">
        <span class="center_item_span">看车地点</span>
        <input
          @click="openMap"
          class="input"
          v-model="locationSite"
          type="text"
          disabled
          placeholder="请选择看车地点"
        />
        <image
          @click="openMap"
          class="image"
          src="https://pic.bangbangtongcheng.com/static/bbcz/dingwei01.png"
          mode=""
        ></image>
      </view>
      <view class="center_item">
        <span class="center_item_span">联系方式</span>
        <input class="input" type="text" placeholder="请填写联系方式" />
      </view>
      <view class="tishi"> 提交后会有平台客服联系您并提供优质服务 </view>
    </view>
    <view class="tijiao">
      <view class="flex">
        <radio style="transform: scale(0.8)" :checked="checked" @click="checked = !checked"></radio>
        <view style="display: inline-block">
          <span>发布即默认同意</span>
          <span style="color: #64b6a8" @click="toUs(3)">《用户协议》</span>
          <span style="color: #64b6a8" @click="toUs(2)">《隐私协议》</span>
        </view>
      </view>
      <view class="btn">提交</view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        // 协议
        checked: false,
        latitude: '',
        longitude: '',
        locationSite: '',
        type4: [],
        typeIndex4: -1,
      }
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    onLoad() {
      this.phone = this.userInfo.phone
      this.getType()
      if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      }
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    mounted() {},
    methods: {
      PickerChange(e) {
        let index = e.detail.value
        let type = e.currentTarget.dataset.type
        if (type == 4) {
          this.typeIndex4 = index
        }
        this.index = e.detail.value
      },
      getType() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/queryDataDictionaryList', {
            type: '4',
          })
          .then((res) => {
            res.dataDictionaryList.forEach((el) => {
              el.active = false
              if (el.type == 4) {
                that.type4.push(el)
              }
            })
          })
      },
      // 获取定位
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          geocode: true,
          success(res) {
            _this.locationSite =
              res.address.province +
              res.address.city +
              res.address.district +
              res.address.street +
              res.address.streetNum +
              res.address.poiName
            _this.latitude = res.latitude
            _this.longitude = res.longitude
          },
          fail(res) {
            console.log(res, '经纬度没有授权')
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              uni.showModal({
                title: '提示',
                content: '您已关闭位置权限或获取位置信息失败',
                success: function (res) {
                  if (res.confirm) {
                    // plus.runtime.openURL("app-settings:");
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
              return false
            }
          },
        })
      },
      openMap() {
        let that = this
        if (that.latitude == '') {
          this.getLocation()
        }
        if (that.latitude == '') {
          return false
        }
        uni.chooseLocation({
          latitude: that.latitude,
          longitude: that.longitude,
          success: function (res) {
            that.locationSite = res.address
            that.latitude = res.latitude
            that.longitude = res.longitude
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }

  .box {
    padding-bottom: 160rpx;
  }

  .center {
    /* #ifdef MP  */
    height: calc(100vh - 96rpx - var(--status-bar-height) - 22px - 196rpx);
    /* #endif */
    /* #ifdef H5 || APP-PULS */
    height: calc(100vh - 96rpx - var(--status-bar-height) - 196rpx);
    /* #endif */
    /* #ifdef APP */
    height: calc(100vh - 96rpx - var(--status-bar-height) - 196rpx);
    /* #endif */
    background-color: #fff;
    padding: 0 40rpx;
    padding-top: 29rpx;
    .center_item {
      height: 97rpx;
      width: 670rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      position: relative;
      .center_item_span {
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        margin-right: 40rpx;
        margin-left: 22rpx;
      }
      .input {
        flex: 1;
        font-size: 34rpx;
        color: #333333;
        margin-right: 70rpx;
      }
      .image {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
    .tishi {
      margin: 0 auto;
      margin-top: 50rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
    }
  }

  .tijiao {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
    z-index: 99;

    .flex {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 44rpx;
      margin-bottom: 25rpx;
    }

    checkbox {
      vertical-align: top;
      margin-right: 6rpx;
      margin-left: 40rpx;
    }

    span {
      font-size: 26rpx;
    }
    .btn {
      width: 670rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 49rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      font-size: 34rpx;
      margin: 0 auto;
    }
  }
</style>
